Financial Data Visualization ডেটা বিশ্লেষণের জন্য একটি গুরুত্বপূর্ণ টুল, যা আর্থিক বাজার, শেয়ার মার্কেট, ব্যালেন্স শিট, এবং অন্যান্য আর্থিক তথ্যের পরিবর্তন বা প্রবণতাগুলি বিশ্লেষণ করতে সাহায্য করে। গুগল চার্টের সাহায্যে আপনি ইন্টারঅ্যাকটিভ আর্থিক ডেটা ভিজুয়ালাইজেশন তৈরি করতে পারেন, যা আর্থিক সিদ্ধান্ত নেওয়ার জন্য অত্যন্ত গুরুত্বপূর্ণ হতে পারে।
এখানে, আমরা গুগল চার্টে আর্থিক ডেটার ভিজুয়ালাইজেশন তৈরির জন্য বিভিন্ন ধরনের চার্ট এবং তাদের কাস্টমাইজেশন দেখাব।
১. Candlestick Chart (ক্যান্ডেলস্টিক চার্ট)
Candlestick Chart হল একটি আর্থিক ডেটা ভিজুয়ালাইজেশন টুল যা মূলত শেয়ার মার্কেট, স্টক প্রাইস বা অন্য কোনো আর্থিক ডেটার গতিশীলতা দেখাতে ব্যবহৃত হয়। এটি মূলত একটি নির্দিষ্ট সময়ের মধ্যে (দিন, মাস, বছর) শেয়ারের খোলার, বন্ধ, সর্বোচ্চ এবং সর্বনিম্ন মূল্য প্রদর্শন করে।
উদাহরণ: Financial Data Visualization with Candlestick Chart
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'candlestick']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Min');
data.addColumn('number', 'Opening');
data.addColumn('number', 'Closing');
data.addColumn('number', 'Max');
data.addRows([
[new Date(2024, 0, 1), 100, 120, 130, 140],
[new Date(2024, 0, 2), 110, 130, 140, 150],
[new Date(2024, 0, 3), 115, 135, 145, 155],
[new Date(2024, 0, 4), 120, 140, 150, 160]
]);
var options = {
title: 'Stock Price Performance',
legend: 'none',
vAxis: {title: 'Price'},
hAxis: {title: 'Date'},
chartArea: {width: '80%'}
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
ব্যাখ্যা:
- CandlestickChart ব্যবহার করা হয়েছে শেয়ারের খোলার, বন্ধ, সর্বোচ্চ এবং সর্বনিম্ন মূল্যের জন্য।
- প্রতিটি ক্যান্ডেল সিম্বলিকভাবে ১ দিনের ট্রেডিং তথ্য দেখায়।
২. Area Chart for Financial Data
Area Chart আর্থিক ডেটার জন্য ব্যবহৃত হতে পারে, যেখানে আপনি কোনও নির্দিষ্ট সময়কালের মধ্যে আয়ের বা খরচের প্রবণতা দেখাতে পারেন।
উদাহরণ: Financial Data with Area Chart
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'area']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.arrayToDataTable([
['Month', 'Revenue', 'Expense'],
['January', 1000, 400],
['February', 1170, 460],
['March', 660, 1120],
['April', 1030, 540]
]);
var options = {
title: 'Monthly Financial Overview',
hAxis: {title: 'Month'},
vAxis: {title: 'Amount'},
isStacked: true
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
ব্যাখ্যা:
- AreaChart ব্যবহার করে, আমরা মাসিক আয়ের এবং খরচের সম্পর্ক দেখাচ্ছি।
- isStacked অপশনটি আয়ের এবং খরচের প্যাকড (stacked) আকারে দেখাতে সাহায্য করে।
৩. Combo Chart for Financial Data
Combo Chart ব্যবহার করে আপনি একাধিক ভেরিয়েবলের সমন্বয়ে একাধিক চার্ট একটি স্লাইডে উপস্থাপন করতে পারেন। যেমন, আপনি শেয়ার মূল্য এবং আয় এক সাথে দেখাতে পারেন।
উদাহরণ: Financial Data with Combo Chart
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.arrayToDataTable([
['Month', 'Revenue', 'Expense', 'Stock Price'],
['January', 1000, 400, 120],
['February', 1170, 460, 130],
['March', 660, 1120, 140],
['April', 1030, 540, 150]
]);
var options = {
title: 'Financial Overview with Combo Chart',
hAxis: {title: 'Month'},
vAxis: {title: 'Amount'},
seriesType: 'bars', // Revenue and Expense as bars
series: {2: {type: 'line'}}, // Stock Price as line
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
ব্যাখ্যা:
- ComboChart ব্যবহার করা হয়েছে যেখানে
RevenueএবংExpenseবারে এবংStock Priceলাইন চার্টে প্রদর্শিত হচ্ছে। - seriesType এবং series কাস্টমাইজ করে একাধিক চার্টের প্রদর্শন করা হয়েছে।
৪. Column Chart for Financial Data
Column Chart ব্যবহার করে আপনি কোনও নির্দিষ্ট সময়ের মধ্যে আয়ের বা খরচের পরিবর্তনও চিত্রিত করতে পারেন। এটি আর্থিক বিশ্লেষণ করতে অনেক সাহায্যকারী।
উদাহরণ: Financial Data with Column Chart
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month', 'Revenue', 'Expense'],
['January', 1000, 400],
['February', 1170, 460],
['March', 660, 1120],
['April', 1030, 540]
]);
var options = {
title: 'Monthly Financial Data',
hAxis: {title: 'Month'},
vAxis: {title: 'Amount'}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
ব্যাখ্যা:
- ColumnChart ব্যবহার করে মাসিক আয়ের এবং খরচের বিশ্লেষণ করা হয়েছে।
সারমর্ম
গুগল চার্ট ব্যবহার করে Financial Data Visualization এর জন্য আপনি বিভিন্ন ধরনের চার্ট তৈরি করতে পারেন, যেমন Candlestick Chart, Area Chart, Combo Chart, এবং Column Chart। এই চার্টগুলি আর্থিক ডেটার বিভিন্ন দিক (যেমন শেয়ার মার্কেট, আয়ের প্রবণতা, ব্যালেন্স শিট বিশ্লেষণ) সহজে এবং ইন্টারঅ্যাকটিভভাবে উপস্থাপন করতে সহায়ক। গুগল চার্টের ইন্টারঅ্যাকটিভ ফিচার যেমন tooltips, legends, এবং custom events ব্যবহার করে আপনি আরও উন্নত এবং ব্যবহারকারী-বান্ধব ডেটা ভিজুয়ালাইজেশন তৈরি করতে পারবেন।
Read more
